<template>
    <!-- 标题 -->
    <div>
        <el-card shadow="hover" style="text-align: center;">页面访问权限设置</el-card>
    </div>
    <!-- 卡片 -->
    <div style="margin-top: 20px;">
        <el-space direction="vertical" alignment="start" :size="30" style="">
            <el-space wrap>
                <el-card v-for="item in formData.twoMenuData" :key="item" class="box-card"
                    style="width: 180px;height: 300px;">
                    <template #header>
                        <div class="card-header">
                            <span>{{ item.title }}</span>
                        </div>
                    </template>
                    <div style="margin-bottom: 20px;">
                        <el-button type="success" :icon="Plus" circle @click="editdialogVisible(item)" />
                        <el-button type="primary" :icon="Edit" circle @click="editdialogVisible(item)" />
                        <el-button type="danger" :icon="Delete" circle @click="editdialogVisible(item)" />
                    </div>
                    <div v-for="role in item.roleall" class="text item">
                        {{ role.id }}-{{ role.desc }}
                    </div>
                </el-card>
            </el-space>
        </el-space>
    </div>
    <!-- 对话框 -->
    <el-dialog v-model="dialogVisible" title="页面访问权限设置" width="500">
        <span>
            <el-select v-model="formData.selectroles" multiple placeholder="Select" style="width: 240px">
                <el-option v-for="item in formData.roles" :key="item.id" :label="item.desc" :value="item.id" />
            </el-select>
        </span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cleartwomenus">取消</el-button>
                <el-button type="primary" @click="pathtwomenus">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import {
    Delete,
    Edit,
    Plus
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ref, reactive } from 'vue'
import twomenusAPI from '@/utils/twomenus/twomenus'
import roleAPI from '@/utils/role/role'
const dialogVisible = ref(false)
const url = 'per-manage/permissions'
const formData = reactive({
    'twoMenuData': [
        {
            title: '',
            name: '',
            url: '',
            component: '',
            icon: '',
            order: '',
            roles: [],
            menu: '',
            menutitle: ''
        }
    ],
    'roles': [],
    'selectroles': [],
    'twoMenuTem': {
        title: '',
        name: '',
        url: '',
        component: '',
        icon: '',
        order: '',
        roles: [],
        menu: '',
        menutitle: '',
    }
})
const dialogTem =
{
    title: '',
    name: '',
    url: '',
    component: '',
    icon: '',
    order: '',
    roles: [],
    menu: '',
    menutitle: ''
}
// 对话框角色处理

const editdialogVisible = (item: any) => {
    // 设置多选按纽初始值
    formData.selectroles = item.roleall.map((item: any) => item.id)
    formData.twoMenuTem = item
    dialogVisible.value = true
}
const pathtwomenus = async () => {
    // 设置修改过的角色

    if (formData.selectroles.length == 0) {
        formData.selectroles = ['1']
    }
    formData.twoMenuTem.roles = formData.selectroles
    delete formData.twoMenuTem.roleall
    await twomenusAPI.edit_twomenu(url, formData.twoMenuTem)
    roles()
    ElMessage({
        message: '你修改的' + formData.twoMenuTem.name + '成功！',
        type: 'success',
    })
    formData.twoMenuTem = dialogTem
    dialogVisible.value = false
}
const cleartwomenus = () => {
    formData.twoMenuTem = dialogTem
    dialogVisible.value = false
}
// 二级路由加载
const roles = async () => {
    const res = await twomenusAPI.get_twomenus(url + '/')
    const roles = await roleAPI.get_all_role('/per-manage/roles/')
    res.map((item: any) => {
        const roletem = []
        roles.map((tem: any) => {
            const roleindex = item.roles.indexOf(tem.id)
            if (roleindex > -1) {
                roletem.push(tem)
            }
        })
        item.roleall = roletem
    })
    formData.twoMenuData = res
    formData.roles = roles
}
roles()
</script>
<style scoped>
.footbutton {
    position: absolute;
    top: 20px;
}
</style>